<template>
	<view class="content">
		<u-notify ref="popup"></u-notify>
		<u-modal :show="showModal" :content="modalContent" @confirm="onModalConfirm" :title="modalTitle"></u-modal>
		<view class="title-view">
			<view class="title">{{ title }}</view>
		</view>

		<view v-if="mode === 'login'">
			<view class="input-view">
				<input class="input" placeholder="请输入邮箱" v-model="email"></input>
				<input class="input" placeholder="请输入密码" v-model="password" password="true"></input>
			</view>
			<view class="button-view">
				<button class="button" @tap="onLoginTap">登录</button>
			</view>
		</view>
		<view v-else-if="mode === 'register'">
			<view class="input-view">
				<input class="input" placeholder="请输入邮箱" v-model="email"></input>
				<input class="input" placeholder="请输入用户名" v-model="register_username"></input>
				<input class="input" placeholder="请输入密码(长度大于等于8位)" v-model="register_password" password="true"></input>
				<input class="input" placeholder="确认密码" v-model="register_passwordAgain" password="true"></input>
				<view class="input-view-checkCode">
					<input class="input input-checkCode" placeholder="验证码" v-model="register_checkCode"></input>
					<button class="button button-checkCode" @tap="onGetCodeTap('register')">
						{{ checkCodeCountdown !== 0 ? checkCodeCountdown : "获取验证码"}}
					</button>
				</view>
				<view class="button-view">
					<button class="button button-register" @tap="onRegisterSubmitTap">注册</button>
				</view>
			</view>
		</view>
		<view v-else-if="mode === 'forget'">
			<view class="input-view">
				<input class="input" placeholder="请输入邮箱" v-model="email"></input>
				<input class="input" placeholder="请输入新密码(长度大于等于8位)" v-model="forget_password" password="true"></input>
				<input class="input" placeholder="确认密码" v-model="forget_passwordAgain" password="true"></input>
				<view class="input-view-checkCode">
					<input class="input input-checkCode" placeholder="验证码" v-model="forget_checkCode"></input>
					<button class="button button-checkCode" @tap="onGetCodeTap('forget')">
						{{ checkCodeCountdown !== 0 ? checkCodeCountdown : "获取验证码"}}
					</button>
				</view>
				<view class="button-view">
					<button class="button button-register" @tap="onForgetSubmitTap">修改密码</button>
				</view>
			</view>
		</view>

		<view class="bottom-button-view" v-if="mode === 'login'">
			<text @tap="onRegisterTap">注册账号</text>
			<text>|</text>
			<text @tap="onForgetTap">忘记密码</text>
		</view>
		<view class="bottom-button-view" v-else>
			<text @tap="onReturnLoginTap">返回登录</text>
		</view>
	</view>
</template>

<script>
	import {
		getCheckCode
	} from "@/network/CheckCodeApi.js";
	import {
		register,
		forget
	} from "@/network/UserApi.js";
	import {
		checkToken
	} from "@/network/LoginToken.js";
	export default {
		data() {
			return {
				// 当前页面模式 login/register/forget
				title: "嘿板",
				mode: "login",

				// 登录参数
				email: "",
				password: "",

				// 注册参数
				register_username: "",
				register_password: "",
				register_passwordAgain: "",
				register_checkCode: "",

				// 忘记密码参数
				forget_password: "",
				forget_passwordAgain: "",
				forget_checkCode: "",


				// 控制模态框
				showModal: false,
				modalContent: "",
				modalTitle: "",

				// 验证码倒计时，如果不为 0
				// 发送验证码按钮就禁用并显示秒数
				checkCodeCountdown: 0,

				// 底部左右按钮的标题
				bottomLeftButton: "注册账号",
				bottomRightButton: "忘记密码",
			}
		},
		onLoad() {
			
		},
		
		onReady() {
			let that = this;
			this.email = this.getData("email");
			this.password = this.getData("password");
			// 查看本地是否存有 LoginToken
			let loginToken = this.getLoginToken();
			if (loginToken !== undefined && loginToken.length == 48) {
				// 验证 LoginToken 是否过期
				uni.showLoading({
					title: "正在恢复登录",
					mask: true
				});
				checkToken(loginToken).then(data => {
					// Token依旧有效，直接登录
					uni.hideLoading();
					// uniapp 此处有概率跳转失败 BUG，多加一个跳转保险
					uni.reLaunch({
						url: "/pages/me/me"
					});
					uni.reLaunch({
						url: "/pages/me/me"
					});
				}).catch(err => {
					uni.hideLoading();
					that.popup("登录已经过期，请重新登录");
					that.setLoginToken("");
				});
			}
		},

		// 手机返回事件
		onBackPress: function(res) {
			// 如果 Modal 模态框正在显示就取消显示
			if(this.showModal) {
				this.showModal = false;
				return true;
			}
			
			// 如果当前不是 login 模式就返回 login
			if (res.from === "backbutton" && this.mode !== "login") {
				this.mode = "login";
				this.title = "嘿板";
				return true;
			}
		},

		methods: {
			/**
			 * 登录按钮单击事件
			 */
			onLoginTap: function() {
				let that = this;
				if (this.email.length === 0 || this.password.length === 0) {
					this.popup("请将内容输入完整");
					return;
				}


				if (this.checkEmail(this.email) === false) {
					this.popup("请输入正确的邮箱地址");
					return;
				}

				if (this.password.length < 8) {
					that.modal("邮箱或密码错误", "登录失败");
					return;
				}

				uni.showLoading({
					title: "登录中",
					mask: true
				});
				// 登录
				uni.request({
					url: this.getUrl() + "/user/login?" + 
						"email=" + this.email + "&password=" + this.md5(this.password),
					method: "POST",
					dataType: "json",
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						uni.hideLoading();
						let data = res.data;
						if (data.status === 0 && data.message === "OK" && data.content !== undefined) {
							// 保存 LoginToken，密码，邮箱
							that.setLoginToken(data.content.token);
							that.setData("email", that.email);
							that.setData("password", that.password);
							console.log(that.getLoginToken());
							// uniapp 此处有概率跳转失败 BUG，多加一个跳转保险
							uni.reLaunch({
								url: "/pages/me/me"
							});
							uni.reLaunch({
								url: "/pages/me/me"
							});
						} else {
							that.modal(res.data.message, "登录失败");
						}
					},
					fail: function(e) {
						uni.hideLoading();
						that.modal(e.errMsg, "登录失败");
					}
				});
			},

			/**
			 * 注册账号点击事件	
			 */
			onRegisterTap: function() {
				this.mode = "register";
				this.title = "注册";
			},

			/**
			 * 忘记密码点击事件	
			 */
			onForgetTap: function() {
				this.mode = "forget";
				this.title = "忘记";
			},

			/**
			 * 返回登录点击事件
			 */
			onReturnLoginTap: function() {
				this.mode = "login";
				this.title = "嘿板";
			},

			/**
			 * 获取验证码点击事件
			 * @param {Object} type register/forget
			 */
			onGetCodeTap: function(type) {
				if (this.checkCodeCountdown !== 0) {
					this.modal("请 " + this.checkCodeCountdown + " 秒后重试", "发送失败");
					return;
				}

				let that = this;
				if (this.email.length === 0) {
					that.popup("请输入邮箱");
					return;
				}
				if (this.checkEmail(this.email) === false) {
					that.popup("请输入正确的邮箱");
					return;
				}
				uni.showLoading({
					title: "正在发送",
					mask: true
				});
				getCheckCode(this.email, type).then(data => {
					that.popup("发送成功", "success");
					// 开始倒计时
					that.countdown(60);
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					that.modal(err, "发送失败");
				});
			},

			/**
			 * 倒计时
			 */
			countdown: function(second) {
				let that = this;
				that.checkCodeCountdown = second;
				let timeClock = setInterval(function() {
					that.checkCodeCountdown -= 1;
					if (Number(that.checkCodeCountdown) <= 0) {
						clearInterval(timeClock);
					}
				}, 1000);
			},

			/**
			 * 提交注册按钮点击事件
			 */
			onRegisterSubmitTap: function() {
				let that = this;
				if (this.email.length === 0 ||
					this.register_username.length === 0 ||
					this.register_password.length === 0 ||
					this.register_passwordAgain.length === 0 ||
					this.register_checkCode.length === 0) {
					this.popup("请将内容输入完整");
					return;
				}

				if (this.register_password.length < 8) {
					this.popup("密码不能小于 8 位");
					return;
				}

				if (this.register_password !== this.register_passwordAgain) {
					this.popup("两次密码不一致");
					return;
				}
				
				uni.showLoading({
					title: "请稍后",
					mask: true
				});
				register(this.email, this.register_username,
					this.md5(this.register_password), this.register_checkCode).then(data => {
					uni.hideLoading();
					that.modal("注册成功", "成功");
					// 返回登录页
					that.onReturnLoginTap();
					that.register_username = "";
					that.register_password = "";
					that.register_passwordAgain = "";
					that.register_checkCode = "";
				}).catch(err => {
					uni.hideLoading();
					that.modal(err, "注册失败");
				});
			},
			
			/**
			 * 修改密码按钮点击事件
			 */
			onForgetSubmitTap: function() {
				let that = this;
				if (this.email.length === 0 ||
					this.forget_password.length === 0 ||
					this.forget_passwordAgain.length === 0 ||
					this.forget_checkCode.length === 0) {
					this.popup("请将内容输入完整");
					return;
				}
				
				if (this.forget_password.length < 8) {
					this.popup("密码不能小于 8 位");
					return;
				}
				
				if (this.forget_password !== this.forget_passwordAgain) {
					this.popup("两次密码不一致");
					return;
				}
				
				uni.showLoading({
					title: "请稍后",
					mask: true
				});
				forget(this.email, this.md5(this.forget_password), this.forget_checkCode).then(data => {
					uni.hideLoading();
					that.modal("密码修改成功", "成功");
					// 返回登录页
					that.onReturnLoginTap();
					that.forget_password = "";
					that.forget_passwordAgain = "";
					that.forget_checkCode = "";
				}).catch(err => {
					uni.hideLoading();
					that.modal(err, "密码修改失败");
				});
			},


			/**
			 * popup弹出层
			 */
			popup: function(message, type = "error") {
				if (type === "error") {
					this.$refs.popup.error(message);
				} else {
					this.$refs.popup.success(message);
				}
			},

			/**
			 * 显示模态框
			 * @param {Object} message
			 */
			modal: function(message, title = "") {
				this.modalContent = message;
				this.modalTitle = title;
				this.showModal = true;
			},

			/**
			 * 模态框确认按钮单击事件
			 */
			onModalConfirm: function() {
				this.showModal = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.content {}

	.title-view {
		padding-top: 100rpx;
		text-align: center;
		margin-bottom: 80rpx;
		animation: fadeInDown;
		animation-duration: 1s;
	}

	.title {
		font-family: "ali";
		font-size: 140rpx;
		color: $u-primary;
		transition: ease-out all 1s;
	}

	.input-view {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.input {
		margin-bottom: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: solid 1px $u-info-disabled;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-radius: 100px;
		transition: ease-out all .2s;
		animation: fadeInDown;
		animation-duration: 1s;
		margin-left: 100rpx;
		margin-right: 100rpx;
	}

	.input:hover {
		border: solid 1px $u-primary;
		margin-left: 80rpx;
		margin-right: 80rpx;
		box-shadow: 0px 0px 5px 3px $u-primary-light;
	}

	.button {
		margin-left: 100rpx;
		margin-right: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		animation: fadeInUp;
		animation-duration: 1s;
		margin-top: -20rpx;
		transition: ease all .2s;
	}

	.button:active {
		margin-left: 80rpx;
		margin-right: 80rpx;
	}

	.bottom-button-view {
		position: absolute;
		bottom: 40rpx;
		font-size: 28rpx;
		width: 100%;
		text-align: center;
		animation: fadeInUp;
		animation-duration: 1s;
		color: $u-info;
	}

	.bottom-button-view text:first-child {
		margin-right: 10rpx;
	}

	.bottom-button-view text:last-child {
		margin-left: 10rpx;
	}

	.input-view-checkCode {
		margin-top: 60rpx;
		position: relative;
	}

	.input-checkCode {
		margin-right: 350rpx;
		position: absolute;
	}

	.input-checkCode:hover {
		margin-right: 350rpx;
		margin-left: 80rpx;
	}

	.button-checkCode {
		margin-left: 420rpx;
		animation: fadeInDown;
		animation-duration: 1s;
	}

	.button-checkCode:hover {
		margin-left: 420rpx;
	}

	.button-register {
		margin-top: 60rpx;
	}
</style>
